﻿<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    
    <title>JQuery UI Dialog Demo</title>
    
    <link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
    
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js"type="text/javascript"></script>
    
    <script type="text/javascript">
        $(document).ready(function() {
            //setup new person dialog
            $('#newPerson').dialog({
                    autoOpen: false,
                    draggable: true,
                    title: "Add New Person",
                    open: function(type, data) {
                        $(this).parent().appendTo("form");
                    }
                });

                //setup edit person dialog
                $('#editPerson').dialog({
                    autoOpen: false,
                    draggable: true,
                    title: "Edit Person",
                    open: function(type, data) {
                        $(this).parent().appendTo("form");
                    }
                });
        });

        function showDialog(id) {
            $('#' + id).dialog("open");
        }

        function closeDialog(id) {
            $('#' + id).dialog("close");
        }
              
    </script>
</head>
<body>
    <form id="frmJqueryDialogDemo" runat="server">
        <asp:ScriptManager ID="mainScriptManager" runat="server"></asp:ScriptManager>
        <input id="btnAdd" type="button" onclick="showDialog('newPerson');" value="Add New Person" />
        <hr />
        <asp:UpdatePanel ID="upGrid" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <asp:GridView ID="gvUsers" AutoGenerateColumns="false" runat="server">
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Names
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:LinkButton ID="lbName" CommandArgument='<%# Eval("Key") %>' Text='<%# Eval("Value") %>' 
                                 OnClientClick="showDialog('editPerson');" onclick="lbName_Click" runat="server"  />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </ContentTemplate>
        </asp:UpdatePanel>   
            
        <div id='newPerson'>
            <asp:UpdatePanel ID="upNewUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
            <ContentTemplate>
                <asp:Label ID="lblNewName" runat="server" AssociatedControlID="txtNewName" Text="Name"></asp:Label>
                <asp:TextBox ID="txtNewName" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="reqName1" ControlToValidate="txtNewName" ValidationGroup="Add" runat="server" ErrorMessage="Name is required"></asp:RequiredFieldValidator>
                <asp:Button ID="btnAddSave" OnClick="btnAddSave_Click" runat="server" Text="Save" />
            </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        
        <div id='editPerson'>
            <asp:UpdatePanel ID="upEditUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
            <ContentTemplate>       
                <asp:Label ID="lblEditName" runat="server" AssociatedControlID="txtEditName" Text="Name"></asp:Label>
                <asp:TextBox ID="txtEditId" Visible="false" runat="server"></asp:TextBox>
                <asp:TextBox ID="txtEditName" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="reqName2" ControlToValidate="txtEditName" ValidationGroup="Edit" runat="server" ErrorMessage="Name is required"></asp:RequiredFieldValidator>
                <asp:Button ID="btnEditSave" runat="server" Text="Save" 
                    onclick="btnEditSave_Click" />
            </ContentTemplate>
            </asp:UpdatePanel>            
        </div>        
    </form>
</body>
</html>
